<template>
    <div>
      <!--搜索-->
			<div v-if="chenload">
				<div class="searchtop">
					<div class="search">
						<div class="searchtext">
							<img src="../../../src/assets/img/shouye/sousuo.png" alt="" class="i1">
							<input type="text" placeholder="请输入相关课程关键字" v-model="input" class="input1">
						</div>
							<span @click="search()" style="color:rgba(51,51,51,1);">搜索</span>
					</div>

					<!--下拉框-->
					<div class="rel">
						<div style="width:6.9rem;margin:auto;display: flex;justify-content:space-around;height: 0.8rem;align-items: center;background: #fff;">
							<!--第一个联动-->
							<div class="shang" @click="btn()" >
								<span :class="quanbu?'blue':'gray'">{{pracite}}</span>
								<img :src="quanbu?imgSrc1:imgSrc2" alt="">
						
							</div>
						
							<!--第二个联动-->
						
							<div class="shang" @click="btn1()" >
								<span :class="quanbu1?'blue':'gray'">{{pracite1}}</span>
								<img :src="quanbu1?imgSrc1:imgSrc2" alt="">
						
							</div>
							<!--第三个联动-->
							<div class="shang" @click="btn2()" >
								<span :class="quanbu2?'blue':'gray'">{{pracite2}}</span>
									<img :src="quanbu2?imgSrc1:imgSrc2" alt="">
							</div>
						</div>
						<div class="pos">
							<div style="overflow-y:scroll;max-height:5rem">
							<transition name="fade">
								<!--第一个-->

								<div  v-if="quanbu" style="background: #fff">
									<div class="xia" v-for="(item,index) in one" @click="xi(item,index)">
										<span :class="item.name == pracite?'spanspan1':'spanspan'">{{item.name}}</span>
										<img src="../../../src/assets/img/search/dui.png" alt="" v-if="item.name == pracite">
										<p></p>
									</div>
								</div>

								<!--第二个-->
								<div  v-if="quanbu1" style="background: #fff">
									<div class="xia" v-for="(item,index) in two" @click="xi1(item,index)">
										<span :class="item.name == pracite1?'spanspan1':'spanspan'">{{item.name}}</span>
										<img src="../../../src/assets/img/search/dui.png" alt="" v-if="item.name == pracite1">
										<p></p>
									</div>
								</div>

								<!--第三个-->
								<div  v-if="quanbu2" style="background: #fff">
									<div class="xia" v-if="quanbu2" v-for="(item,index) in t" @click="xi2(item)">
										<span :class="item.name == pracite2?'spanspan1':'spanspan'">{{item.name}}</span>
										<img src="../../../src/assets/img/search/dui.png" alt="" v-if="item.name == pracite2">
										<p></p>
									</div>
								</div>

							</transition>
							</div>
						</div>
						
					</div>
			</div>
      <!--内容-->
			<!-- <div :class="searchBarFixed?'mar':'pad'"> -->
				<mescroll-vue ref="mescroll0" :up="getMescrollUp(0)" @init="mescrollInit0">
					<!-- <div> -->
						<div id="dataList0">
							<div class="n" v-for="(item,index) in tab0.list" @click="tapclick(item)">
								<img :src="img+item.thumb" alt="" class="img1">
								<div class="right">
									<p>{{item.name}}</p>
									<p class="righttwo">
										<span><img src='../../../src/assets/img/colorren.png' mode=""/>{{item.hits}}人已加入</span>
										<!-- <span>{{item.tag_name}}</span> -->
										<span v-if="item.price==0.00||item.price=='0.00'||item.price==0||item.price=='0'" class="pricefree">免费</span>
										<span v-else>￥{{item.price}}</span>
									</p>
								</div>
							</div>
						</div>
					<!-- </div> -->
				</mescroll-vue>
				

			<!-- </div> -->
		</div>
		<div class="loadmore" v-else>
		  <img src="../../../src/assets/img/load.gif" alt="">
		</div>

    </div>

</template>

<script>
  import MescrollVue from 'mescroll.js/mescroll.vue'
    export default {
        name: "zbojieguo",
		components: {
		  MescrollVue
		},
      data(){
          return{
				imgSrc: require("../../assets/img/kongbai.png"), 
				imgSrc1: require("../../assets/img/search/shang.png"), 
				imgSrc2: require("../../assets/img/search/bto.png"), 
				chenload:false,
				tab0: {mescroll: null, list: [], isListInit: false}, // 全部
				tabType:0,
				b:false,
				img:this.$store.state.img,
				bol:true,
				quanbu:false,
				quanbu1:false,
				quanbu2:false,
				arr:[],
					  allLoaded:false,
				input:'',
				pracite:'全部分类',
				pracite1:'全部频道',
				pracite2:'综合',
				one:[
					{
					  name:'全部分类',
					  sub_id:''
					}
				],
				two:[
				  {
					name:'全部频道',
					sub_id:''
				  }
				],
				t:[
				  {name:'综合',lass_id:'sort'},
				  {name:'最新',lass_id:'new'},
				  {name:'免费',lass_id:'free'},
				  {name:'最热',lass_id:'hot'}
				],
				class_id:'',
				sub_id:'',
				lass_id:'',
				searchBarFixed:false,
				page:1,
          }
      },
      methods:{
		// 点击跳转
		tapclick(item){
			// console.log(11);
			var tag = item.tag;
			var id = item.id;
			// tag 1  2班级  3专题 4课程
			var type = item.type;
			this.$router.push({
				path:'/course',
				query:{
				 cid:id
				}
			})
		  },

        search(){
			var that = this;
			var newinput = that.inputarrnew;
			var a=0;
			var b=0;
			if(newinput.length!='0'||newinput.length!=0){
				for(var i=0;i<newinput.length;i++){
					if(this.input==newinput[i]){
						a++
					}else{
						b++
					}
				}
			}else{
				this.inputarrnew = newinput.concat(this.input);
				localStorage.setItem('inputarr',JSON.stringify(this.inputarrnew));
			}
			
			if(a==1||a=='1'){
				localStorage.setItem('inputarr',JSON.stringify(this.inputarrnew));
			}else if(b==1||b=='1'){
				this.inputarrnew = newinput.concat(this.input);
				localStorage.setItem('inputarr',JSON.stringify(this.inputarrnew));
			}else if(a==0||a=='0'){
				this.inputarrnew = newinput.concat(this.input);
				localStorage.setItem('inputarr',JSON.stringify(this.inputarrnew));
			}else if(b==0||b=='0'){
				localStorage.setItem('inputarr',JSON.stringify(this.inputarrnew));
			}
            sessionStorage.setItem('input',that.input);
			this.pracite2 = '综合'
			this.pracite = '全部分类'
			this.pracite1 = '全部频道'
			this.sub_id = '';
			this.class_id = '';
			this.lass_id = '';
			this.changeTab();
        },
        btn(){
			var that = this;
            that.quanbu = !that.quanbu;
			that.quanbu1 = false;
			that.quanbu2 = false;
        },
        btn1(){
			var that = this;
            that.quanbu1 = !that.quanbu1;
            that.quanbu = false;
            that.quanbu2 = false;
        },
        btn2(){
			var that = this;
            that.quanbu2 = !that.quanbu2;
            that.quanbu = false;
            that.quanbu1 = false;
        },
        xi(item,index){
			var that = this;
            //点击第一个联动
            that.pracite = item.class_name;
            that.quanbu = !that.quanbu;
            that.pracite = item.name;
            that.class_id = item.id;
            that.changeTab();


        },
        xi1(item,index){
			var that = this;
            that.pracite1 = item.name;
            that.quanbu1 = !this.quanbu1;
		    that.pracite1 = item.name;
            that.sub_id = item.id;
            that.changeTab();
        },
        xi2(item){
			var that = this;
			that.pracite2 = item.name;
			that.quanbu2 = !that.quanbu2;
			that.pracite2 = item.name;
			that.lass_id = item.lass_id;
			that.changeTab();
        },
		changeTab () {
			this.tab0.list = []// 在这里手动置空列表,可显示加载中的请求进度
			this.getTabData(0).mescroll.resetUpScroll(); // 刷新列表数据
		},
		getTabData (tabType) {
		  if (tabType == null) tabType = this.tabType;
		  if (tabType === 0) {
			return this.tab0;
		  }
		},
		mescrollInit0 (mescroll) {
		  this.tab0.mescroll = mescroll;
		},
		getMescrollUp (tabType) {
		  return {
			auto: true,
			callback: this.upCallback, // 上拉回调,此处可简写; 相当于 callback: function (page) { upCallback(page); }
			noMoreSize: 5, // 如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				 empty: {
				  warpId: 'dataList0', // 父布局的id;
				  icon: this.imgSrc, // 图标,默认null
				  tip: '暂时没有找到您所需要的内容…', // 提示
				},
			
		  }
		},
		upCallback (page, mescroll) {
			var that = this;
			// setTimeout(function(){
				that.axios.get(that.$store.state.url +'Live/search',{
					params:{
						keyword:sessionStorage.getItem('input'),
						cid:that.class_id,
						pid:that.sub_id,
						field:that.lass_id,
						page:page.num,
						limit:page.size,
						new:1
					},
				}).then(res=>{
					if(res.data.errcode==0||res.data.errcode=='0'){
						this.chenload=true;
						var curPageData = res.data.data;
						  mescroll.endSuccess(curPageData.length);// 联网成功的回调,隐藏下拉刷新和上拉加载的状态;
						 if (page.num === 1) this.tab0.list = []; // 如果是第一页需手动制空列表
						 this.tab0.list = this.tab0.list.concat(curPageData); // 追加新数据
						 // this.tab0.list=res.data.data.order
						}
					// }
				})
		},

      },
      mounted() {
				this.sdk.getJSSDK('','',this.$store.state.url);	
            var that = this;
            //课程分类
			that.axios.get(that.$store.state.url +'live/getCourseClass').then(res=>{
				that.chenload=true;
			    if (res.data.errcode == 0||res.data.errcode == '0'){
					that.one = res.data.data;
					var obj = {
					   name:'全部分类',
					   id:''
					}
				    that.one.unshift(obj)
				 // console.log(that.one);
			    }
			})
         
         //课程频道
            that.axios.get(that.$store.state.url +'live/getChannel').then(res=>{
				this.chenload=true;
			    if (res.data.errcode == 0||res.data.errcode == '0'){
					that.two = res.data.data;
					var obj = {
					   name:'全部频道',
					   id:''
					}
					that.two.unshift(obj)
                }
            })
				
		    that.input = sessionStorage.getItem('input');
	
			if(localStorage.inputarr){
				// console.log(8989)
				this.inputarrnew = JSON.parse(localStorage.getItem('inputarr'));
			}else{
				this.inputarrnew = [];
			}
		
      },
      computed:{

      }
    }
</script>

<style scoped>
	.searchtop{
		position: fixed;
		top: 0;
		background: #fff;
		width: 7.5rem;
		z-index: 9999;
	}
	.mescroll {
	  position: fixed;
	  top: 1.5rem;
	  bottom: 0;
	  height: auto;
	}
  .rel{
    position: relative;
    background: #fff;
  }
  
  .mar{
    margin-top: 0.8rem;
    padding-bottom: 0.4rem;
    background: #fff;
    overflow: hidden
  }
	.pricefree{
		color: #0287FF !important;
	}
    .search{
      width: 92%;
      margin: auto;
      height: 0.56rem;
      margin-top: 0.2rem;
    	display: flex;
    	justify-content: space-around;
      /* position: relative; */
    }
    .searchtext{
    	width: 5.9rem;
    	height: .56rem;
    	background: #F0F0F0;
    	border-radius:0.28rem;
    	border:0.01rem solid #EDEDED;
			overflow: hidden;
    }
    .input{
      width: 4.2rem;
      height: 100%;
      font-size:0.24rem;
      color:rgba(153,153,153,1);
      /* text-indent: 1.58rem; */
      outline: none;
      -webkit-appearance: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    	background: #F0F0F0;
			text-align: center;
    }
    .input1{
      width: 5rem;
      height: 100%;
      font-size:0.24rem;
      color:rgba(153,153,153,1);
      /* text-indent: 1.58rem; */
      outline: none;
      -webkit-appearance: none;
      -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
    	background: #F0F0F0;
			text-align: center;
    }
    .search span{
      font-size:0.28rem;
      margin-left: 0.3rem;
    	display: inline-block;
    	line-height: .56rem;
    }
    .i{
      width: 0.32rem;
     height: .32rem;
     margin-left: 1.19rem;
     margin-top: .13rem;
    }
    .i1{
       width: 0.32rem;
      height: .32rem;
      margin-left: .1rem;
      margin-top: .13rem;
    }
    .n{
      width: 92%;
      margin: auto;
      margin-top: 0.2rem;
			display: flex;
			justify-content: flex-start;
    }
		/* .n{
		} */
  .img1{
    width: 2.1rem;
    height: 1.18rem;
    border-radius:0.08rem;
		overflow: hidden;
  }
  .right{
    width: calc(92% - 2.1rem);
    height: 100%;
    margin-left: .2rem;
    display: flex;
    flex-wrap: wrap;
    align-content: space-around;
  }
  .right p{
    width: 100%;
  }
	.right .righttwo{
	  margin-top: 0.18rem;
	}
	.right .righttwo span:nth-child(1){
	  box-sizing: border-box;
	  font-size: 0.24rem;
	  line-height:0.32rem;
		color: #C2C9D3;
	}
	.right .righttwo span:nth-child(1) img{
		  width: .32rem;
		  height: .32rem;
		  vertical-align: middle;
	}
  .right p:nth-child(1){
		height: .6rem;
    font-size:0.28rem;
    color:rgba(51,51,51,1);
    line-height:0.32rem;
    overflow: hidden;
    text-overflow: ellipsis;
    overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
  }
    .right p:nth-child(2) span:nth-child(2){
      float: right;
      font-size:0.3rem;
      font-weight:bold;
      color:rgba(255,2,20,1);
      line-height:0.32rem;
    }
  .shang{
   width: 30%;
    height: 0.5rem;
    display: flex;
    align-items: center;
  }
  .shang:nth-child(2){
    justify-content: center;
  }
  .shang:nth-child(3){
    display: flex;
    justify-content: flex-end;
  }
  .blue{

    font-size:0.26rem;
    color:rgba(2,135,255,1);
  }
  .gray{
    font-size:0.26rem;
    color:rgba(51,51,51,1);
  }
  .shang img{
    width: 0.15rem;
    height: 0.12rem;
    margin-left: 0.14rem;
  }
  .xia{
    width: 92%;
    margin: auto;

    /*margin-top: 0.2rem;*/
   padding-top: 0.2rem;
  }
  .spanspan{
      font-size:0.28rem;
      color:rgba(51,51,51,1);
    vertical-align: middle;
  }
  .spanspan1{
    font-size:0.28rem;
    color:rgba(2,135,255,1);
    vertical-align: middle;
  }
  /*.xia:hover .spanspan{*/
    /*color:rgba(2,135,255,1);*/
  /*}*/
  .xia img{
    width: 0.32rem;
    vertical-align: middle;
    float: right;
  }
  .xia p{
    width: 100%;
    height: 0.02rem;
    background:rgba(237,237,237,1);
    margin-top: 0.2rem;
  }
  .pos{
    width:7.5rem;

    position: absolute;
    top: 0.7rem;
    left: 0;
  }
  /*.one{*/
    /*display: inline-block;*/
  /*}*/
    .fade-enter-active, .fade-leave-active {
      transition: opacity 0.25s ease-out;
    }

    .fade-enter, .fade-leave-to {
      opacity: 0;
    }
</style>
